<template>
  <div class="main" style="width:760px">
    <el-table
      class="box"
      :data="searchSongTableData"
      height="780px"
      style="width: 100%"
      @cell-click="palySong"
    >
      <el-table-column
        type="index"
        :label="searchSongTableData.length + ''"
        sortable
        width="40"
      >
      </el-table-column>
      <el-table-column prop="name" label="书名" width="190"> </el-table-column>
      <el-table-column prop="artist" label="作者" width="150">
      </el-table-column>
      <el-table-column prop="album" label="专辑" width="140"> </el-table-column>
      <el-table-column prop="songTimeMinutes" sortable label="时长">
      </el-table-column>
      <el-table-column prop="score100" sortable label="热度"> </el-table-column>
      <el-table-column prop="hasLossless" label="音质">
        <template slot-scope="scope">
          <span :class="scope.row.hasLossless == 'true' ? 'wusun' : 'chaopin'">
            {{ scope.row.hasLossless == 'true' ? '无损' : '超品' }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      searchSongTableData: []
    }
  },
  mounted: function() {
    this.getSearchSongTableData()
    $('.el-table__body-wrapper').niceScroll({ cursorcolor: '#EBEEF5' })
  },
  methods: {
    palySong(row, column, event, cell) {
      this.$emit('songObj', row)
    },
    getSearchSongTableData: async function() {
      var searchSongTableData = []
      // console.log(this.$route.query.sname)
      if (this.$route.query.sname == null) {
        searchSongTableData = await this.$http.get('api/getSearchSong.php')
      } else {
        searchSongTableData = await this.$http.get(
          'api/search_song.php?sname=' + this.$route.query.sname
        )
      }

      this.searchSongTableData = searchSongTableData.data
    }
  },
  watch: {
    $route(to, from) {
      this.getSearchSongTableData()
    }
  }
}
</script>

<style lang="less" scoped>
.wusun {
  // margin-left: 5px;
  padding: 2px;
  flex-shrink: 0;
  font-size: 12px;
  color: #e6b86d;
  cursor: pointer;
  border: #e6b86d solid 1px;
  border-radius: 2px;
}

.chaopin {
  // margin-left: 5px;
  padding: 2px;
  flex-shrink: 0;
  font-size: 12px;
  color: #7c8db5;
  cursor: pointer;
  border: #7c8db5 solid 1px;
  border-radius: 2px;
}
</style>
